<template>
	<view class="bg-white flex flex-direction" style="height: 100vh; width: 100vw;" :style="[{paddingTop: StatusBar + 'px'}]">
		<view style="padding: 32rpx;">
			<text class="cuIcon-close text-black" style="font-size: 50rpx; font-weight: bold;" @click="back"></text>
		</view>
			
		<view style="padding: 32rpx; font-size: 50rpx; font-weight: bold; color: #000000;">
		       请设置用户名和密码
		</view>
		<view style="margin-top: 144rpx; padding: 0 32rpx;">
			<view class="flex align-center justify-between solid-bottom" style="height: 104rpx;">
				<input v-model="username"  placeholder="请设置您的用户名" style="font-size: 40rpx;color: #1C1C1E;" placeholder-style="font-size: 40rpx; color: #999999;"/></input>
				<text v-if="username && username.length>0" class='cuIcon-roundclose text-gray' @click="username=''" style="font-size: 40rpx;"></text>
			</view>
			<view class="flex align-center justify-between solid-bottom" style="height: 104rpx;">
				<input v-if="!showpassword" v-model="password" :password="true" :focus="isFocus" placeholder="密码至少6位" style="font-size: 40rpx;color: #1C1C1E;" placeholder-style="font-size: 40rpx; color: #999999;"/></input>
				<input v-if="showpassword" v-model="password" type="text" :focus="isFocus" placeholder="密码至少6位" style="font-size: 40rpx;color: #1C1C1E;" placeholder-style="font-size: 40rpx; color: #999999;"/></input>
				<view :class="[showpassword? 'cuIcon-attention': 'cuIcon-attentionforbid']" @click="show()" class=" text-gray" style="font-size: 40rpx;"></view>
			</view>
		</view>
		
		<view style="padding: 0 32rpx; margin-top: 64rpx;">
			<button @click="login" :disabled="disabled" :style="disabled ? {opacity: 0.5} : ''" 
			style=" height: 96rpx; color: white; background-color: #007AFF; border-radius: 8rpx;font-size: 36rpx;">
			完成</button>
		</view>
	</view>	
</template>

<script>
	export default{
		data(){
			return{
				username:"",
				password:"",
				isFocus: false,
				showpassword:false,
			}
		},
		computed: {
			disabled() {
				if(this.username === '' || this.password === '') {
					return true;
				}
				return false;
			}
		},
		onLoad() {
			console.log(this.$Route.query.mobile)
		},
		methods:{
			show(){
				this.showpassword=!this.showpassword;//隐藏密码
				this.isFocus = true;
			},	
			login(){
				let register={
					mobile:this.$Route.query.mobile,
					password:this.password,
					username:this.username
				}
				console.log(register)
				this.$http.post('/ucenter/register',register).then(res =>{
					if(res.data.success){
						this.$Router.push({name:'indexFrontEnd'})
						this.$tip.success('设置成功')
					}
				})
			}
		}
	}
</script>

<style>
</style>
